<template>
    <div class="content">
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>
            <el-form :model="formInline"  class="formInline" ref="formInline"
            label-width="70px" slot="form">
                <el-row :gutter="41">
                   <el-col :span="8" v-if="schoolType == '0'"> 
                        <el-form-item label="年级" prop="gradeId">
                         <grade v-model="formInline.gradeId"></grade>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="classId">
                            <getClass v-model="formInline.classId" :grade='formInline.gradeId'></getClass>
                        </el-form-item>
                    </el-col>
                     <el-col :span="8">
                        <el-form-item label="姓名"  prop="name">
                            <el-input v-model="formInline.name" placeholder="请输入姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8" v-if="schoolType !== '0'">
                        <el-form-item label="日期范围">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>             
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41" v-if="schoolType == '0'">    
                    <el-col :span="8">
                        <el-form-item label="日期范围">
                            <el-row>  
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.startDate" type="date" format="yyyy-MM-dd" placeholder="选择开始日期" :picker-options="formInline.pickerOptions1" @change="dateChange1" style="width:100%">
                                    </el-date-picker>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <el-date-picker :editable="false" v-model="formInline.endDate" type="date" placeholder="选择结束日期" :picker-options="formInline.pickerOptions2"  @change="dateChange2" style="width:100%">
                                    </el-date-picker>
                                </el-col> 
                            </el-row>             
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" @click="search('formInline')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button @click.native="importOut">导出</el-button>
                </div>
            </div>
            <el-table :data="AnnounceList" border style="width: 100%" v-loading="loading"  @sort-change="sortChange">
                <el-table-column label="e学云ID号" align='center' min-width="140px">
                    <template scope="scope">
                        {{scope.row.exueCode ? scope.row.exueCode : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="姓名" align='center'>
                     <template scope="scope">
                        {{scope.row.name ? scope.row.name : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="布置作业数" align='center' min-width="140px" sortable="custom" prop="releaseNum">
                     <template scope="scope">
                        {{scope.row.releaseNum ? scope.row.releaseNum : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="作业提交次数"  align='center' min-width="140px" sortable="custom" prop="commitNum">
                    <template scope="scope">
                        {{scope.row.commitNum?scope.row.commitNum:'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="发布动态数"  align='center'  min-width="140px" sortable="custom" prop="dongtaiNum">
                    <template scope="scope">
                        {{scope.row.dongtaiNum?scope.row.dongtaiNum:'--'}}
                    </template>
                </el-table-column>
                  <el-table-column label="制作课件数"  align='center'  min-width="140px">
                    <template scope="scope">
                        {{scope.row.coursewareNum?scope.row.coursewareNum:'--'}}
                    </template>
                </el-table-column>
                  <el-table-column label="上传资源数"  align='center' min-width="140px">
                    <template scope="scope">
                        {{scope.row.resourceNum?scope.row.resourceNum:'--'}}
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import {pageTeacherActive} from 'api/home';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions, mapGetters } from 'vuex';
import getClass from 'components/SchoolClasss/class1';
import grade from 'components/SchoolClasss/grade';
import moment from 'moment'
export default {
    name: 'teacherActiveList',
    components: { TableLayout, grade, getClass },
    data() {
        return {
            loading: true,
            formInline: { // 查询 表单数据
                name: '',
                classId: '',
                gradeId: '',
                startDate: '', // 注册开始时间
                endDate: '', // 注册结束时间
                pickerOptions1: {},
                pickerOptions2: {}
            },
          
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            releaseNumStatus: '', // 布置次数 （0升序1降序）
            commitNumStatus: '', // 提交率排序
            dongtaiNumStatus: '', // 发布动态数
            AnnounceList: []
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolType',
            'schoolName'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },
    // 初始化
    created() {
        this.searchFetchData();
    },
    methods: {
        // 全局获取行数classStudent
        ...mapActions(['ChangePageSize']),
        // handleSelectionChange(val) {
        //     this.multipleSelection = val;
        // },

        importOut() {
            let userId=this.uid||'';
            let gradeId=this.formInline.gradeId||'';
            let classId=this.formInline.classId||'';
            let name=this.formInline.name||'';
            let schoolId=this.schoolId||'';
            let releaseNumStatus=this.releaseNumStatus||'';// 布置次数排序（0升序1降序）
            let commitNumStatus=this.commitNumStatus||'';// 提交率排序
            let dongtaiNumStatus=this.dongtaiNumStatus||'';// 发布动态数
            let startTime=this.formInline.startDate?moment(this.formInline.startDate).format('YYYY-MM-DD'):'';
            let endTime=this.formInline.endDate?moment(this.formInline.endDate).format('YYYY-MM-DD'):'';
            window.location.href = `${LOCAL_API.scy}/active/exportTeacherActive?userId=${userId}&gradeId=${gradeId}&classId=${classId}&name=${name}&schoolId=${schoolId}&startTime=${startTime}&endTime=${endTime}&releaseNumStatus=${releaseNumStatus}&commitNumStatus=${commitNumStatus}&dongtaiNumStatus=${dongtaiNumStatus}`
        },
        // 点击查询 
        search(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.listQuery.page = 1;
                    this.loading = true;
                    this.searchFetchData();
                } else {
                    return false;
                }
            });
        },

      
        // 查询列表
        searchFetchData() {
            this.loading = true;
            let json={
                page: this.listQuery.page,
                rows: this.config.pageSize,
                releaseNumStatus: this.releaseNumStatus, // 布置次数排序（0升序1降序）
                commitNumStatus: this.commitNumStatus, // 提交率排序
                dongtaiNumStatus: this.dongtaiNumStatus, // 发布动态数
                gradeId: this.formInline.gradeId,
                classId: this.formInline.classId,
                name: this.formInline.name,
                schoolId: this.schoolId,
                startTime: this.formInline.startDate?moment(this.formInline.startDate).format('YYYY-MM-DD'):'',
                endTime: this.formInline.endDate?moment(this.formInline.endDate).format('YYYY-MM-DD'):''
            }
            pageTeacherActive(json).then(res => {
                this.loading = false;
                this.AnnounceList = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading = false;
            });
        },
        sortChange({ column, prop, order }) {
            this.releaseNumStatus='';// 布置作业数
            this.commitNumStatus='';// 提交率排序
            this.dongtaiNumStatus='';// 发布动态数
            if (prop=='releaseNum') {// 布置作业数
                this.releaseNumStatus=order=='ascending'?'0':order=='descending'?'1':'';
            }
            if (prop=='commitNum') {// 提交率排序
                this.commitNumStatus=order=='ascending'?'0':order=='descending'?'1':'';
            }
            if (prop=='dongtaiNum') {// 发布动态数
                this.dongtaiNumStatus=order=='ascending'?'0':order=='descending'?'1':'';
            }
            this.searchFetchData()
        },
          // 开始日期選擇
        dateChange1(date) {
            this.formInline.pickerOptions2 = {
                disabledDate(time) {
                    return time.getTime() < new Date(date).getTime()- 864e5;
                }
            }
        },
        // 结束日期选择
        dateChange2(date) {
            this.formInline.pickerOptions1 = {
                disabledDate(time) {
                    return time.getTime() > new Date(date).getTime() - 864e5;
                }
            }
        },
        // 分页
        handleSizeChange(val) {
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss">
.content {
    position: relative;
    padding: 0px;
    $bgcolor: #fff;
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
}
</style>